بان الرحشس الخ 


AJAX net 


Asynchronous J avaScript And XML =A] AX 


بالتمارين 


Part 3 


تالیاے وإغداں 


اواز شيخي 


pSmart WEB 


The Best Solution For vVVab 


AWAZ SHIKHI 


Web Developer 


Dmascuse Syria 


Mob +963 955 26 ٩7 66 
8 MSN , smart-vision1@ hotmail.com 


أرحب بالعمل في دول الخليج العربي في مجال تصميم وبرمجة المواقع الالكترونية والتدريب له باستخدام بيئة أ ١‏ . 
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تاریخ اجاکس: 


مصطلح اجاكس ظهر أول مرة في مقالة بتاريخ ۱۸ فبراير ٠٥‏ 


١‏ لكاتب أمريكي وقد وصف مجمو عة تقنيات و 


أساليب تخت عن قل عر في جل a O‏ الإلكتروني بطريقة تشبه برامج 


مستقبل اجاکس: 


هناك الكثير يعتقدون أنه سيتحول عالم البرمجيات إلى الويب بمعني انه يمكنك استخدام البرامج المختلفة من خلال المتصفح 
وهناك مواقع كثيرة بدأت المشوار متل تحويل ملفاتك إلى صيغ مختلفة من خلال المتصفح > فبعضهم قال إن تطبيقات الويب لم 


تعد صفحات بعد الآن بل أصبحت تطبيقات سطح مكتب حقيقية. 


تنويه مهم قبل البدء : يجب تحميل الجزء الأول من الكتاب وتعلم كيفية ربط عناصر اجاكس ببينة 2008 ۲٤ل.‏ من 
خلال الدرس الأول في الجزء الأول من الكتاب يمكن تحميله من الرابط التالي : 


AJ AX PART 1 
http://www.4shared.com/file/110593220/71lee5e0d/A] AXnet. html 


AJ AX PART 2 


http://www.4shared.com/file/133596333/b42db913/A] AX_ part_2.htm 


فام اكاب غير مجاني يرجى إرسال أي مبلغ إلى الحساب التالي : 


المصرق الدولي للتجارة والتمويل 
دمشق - سوریا 

gbtfsyda : دوکنl‎ 

رقم الحساب : 613/751774 

اسم صاحب الحساب : آواز شيخي 


International Bank For Trade And Finance 
Damascus — Syria 

Swift code : gbtfsyda 

AC/NO: 613/751774 

Name: Awaz Shikhi 
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عارض صور يعمل بشكل تلقائي عند الضغط على زر التشغيل ليقوم بتبديل عرض الصور 
الموجودة حسب رغبة المستخدم ويمکنه العارض من التقدم بالصور والرحوع للخلف 


يساعد هذا التمرين على معرفة مدى قوة كلمة المرور المكتوبة بداخل صندوق النص 
وذلك بثلات اشكال مختلفة متها كاك كلمة ترفن مدى القوة أو عن طرق تدر 
اضهار اللون عند قوة الكلهة: 


طرق مختلفة في تعبئة البيانات الخاصة في صناديق النص ليتمكن المستخدم النهائي 
من اختيار ما يناسبه من صندوق النص دون الحاجة إلى كتابته 


ا۴ يملك ضل جمیل یمکن ان يحتوي إي عنصر نرید استخدامه 
ثلانة طرق مختلفة في إدراج التاريخ في صندوق النص ويتنسيق التاريخ المختلفة 


تحديث البيانات الموجودة في الشريط العلوي بحركة بطريقة بثلاتة طرق انيميشن يتم 
اخفارها عبر ضنادتق الإختنار 


أشرطة تمرير قيم رقمية يتم تحديث القيم بشكل مباشرة عند التمرير ويظهر توقيت 
اخر تحديث لتلك القيم 


قائهة فن الرواظ طهر بالط على الذانط الائ 


صندوق نص عند الضغط عليه تظهر قائمة من الخيارات لنختار منها اختيار واحد ويتم 
وضع قيمته في صندوق النص بعد اختيار المناسب 
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التمرين الأول : 


Slide Show Extender Control 


) ۱ 


ن فقویم رو ارجا ایور ند ان زیر 
Awaz Shek 2‏ 
دة تت تدترا ند بین ر . -¶° ) 


الصور عند الايقاق ۱ 
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Solution Explorer ` Solution "1T1 project) eH XK 


EEE EL 
1 Solution "1'1 project; 
3: ا‎ Efajax par 3 Awaz Ã' 


ppt‏ و 
TT‏ ا EH GR Bin‏ 
دصو و تايا 2 س EF images‏ - 
لرعبة [EE] Blue hils. jpg‏ 


Sunset, jpg‏ اا 
wWerticalPicture. jp‏ اقا 


Water lilies. jpg‏ اا 


i. اا‎ Winter , jp 


Default. aspx 
i web ,config 4 


منصدة العمل,;الرنيسية 


Fl 


: العناصر المستخدمة في التمرين‎ 
asp:lmage - 
asp:Label - 
asp:Button - 
cc1:SlideShowExtender - 


عنصر اجاکس المستخدم : 

| KZ ResizableContralExtender 

LEÊ RoundedCornersExtender 

I SliderExtender 

[7 Tabloantainer 
E TextBoxWatermarkExtender 
ا‎ ToggleButtonExtender 
Lg TonalkitScriptManager 


: Default.aspxX ةحiص کود‎ 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" < 


<e@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" > 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xml1lns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<h2 style="text-align: center">Slide Show Extender Control</h2> 
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<div> 

<div style="text-align :center'"> 

<script runat="server" type="text/C#"> 
[System. Web. Services. WebMet hod ] 
[System. Web. Script. Services. ScriptMethod ] 


public static AjaxControlToolkit.Slide[] getslides () 


{ 
AjaxControlToolkit.Slide[] slides = new 
AjaxControlToolkit.Slide [5]; 
slides [0] = new AjaxControlToolkit. Slide ("images /Blue 
hills. jpg", "Awaz Shikhi", "Awaz Shikhi"); 
slides[1] = new AjaxControlToolkit . Slide ("images/Sunset . jpg", 
"Muhmad romany'", "Muhmad romany") ; 
slides[2] = new AjaxControlToolkit. Slide ("images/Winter. jpg", 
"Zedan", "Zedan"); 
slides[3] = new AjaxControlToolkit. Slide ("images /Water 
lilies. jpg", "Samir", "Samir") ; 
slides [4] = new 
AjaxControlToolkit. Slide ("images/VerticalPicture. jpg", "Roz", "Roz"); 
return (slides); 
} 
</script> 
&nbsp; &nbsp; <br /> 
<br /> 


<asp : Image ID="Imagel" runat="server" Height="250px" 
Width="200px" /><br /> 
<br /> 


<asp :Label 1ID="1blImageDescription" runat="server" /><br /> 
<br /> 


<asp :Button ID="Btn_ Previous" runat="server" Text="Previous" /> 
<asp : Button ID="Btn Next" runat="server" Text="Next"" 
Width="64px" /><br /> 
<br /> 
<asp :Button ID="Btn_ Play" runat="server" Text="Play'" /><br /> 
<cc1l :SlideShowExtender 1ID="SlideShowExtender1l" 
AutoPlay="true" ImageDescriptionLabelID="1bl ImageDescription" 
Loop="true" NextButtonlD="Btn_ Next" PlayButtonlD="Btn_ Play" 
PlayButtonText=" Play" PreviousButtonlIlD=" Btn _ Previous" 
SlideShowServiceMet hod="GetSlides" StopButtonText="Stop" 
TargetControlID="Imagel" runat="server"> 
</cc1: SlideShowExtender> 


</div> 
</div> 
</form> 


</body> 
</html> 


ملاحظات حول الكود البرمجي : 


تم تعرف ضمن كود الصفحة كود سي شارب ضمنيا و عرف بداخل الكود مصفوفة تضم عدد الصور المطلوب إظهارها 
في العارض ستلاحظ عند تعریف ع |ا؟.† ٤۲۵۱۳٥۵۱)‏ ×ه ز۸ ضمن كود السي شارب قبل تعریف عنصر اجاکس 
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Extender‏ idesShowاك:ٍءcء‏ عدم التعرف على مكتبة الارتباط الحيوي لعناصر اجاکس لکن بعد تعريف عصر اجاكس 
سيتم تعريف المكتبة بشكل تلقائي من قبل بيئة العمل . 


نهاية التمرين الأول 
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التمرين الثاني : 


الشكل العام للتمرين : 


معرغة ا ا 
وة كلمة المرور و 
_ اثلاث ايق 


| 7 more characters 
Bar Indicators 


۱ 


| Eee aica 


الشكل العام لبيئة العمل : 


[gz] Solution 'Solution1' {1 p 
1 ÊÊ E:1...isolution2! 
1 i ûpp_DPata 
E: Bin 
29 13| Default, aspx 
n A Stylesheet, css 
i, i web „config 


rojert) 


العناصر المستخدمة في التمرين ٤‏ 


asp: TextBox - 
asp:Label - 
cc1:PasswordStrength - 
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عنصر اجاكس المستخدم : 
3ë MutuallyExclusi¥eZheckBosx,..,‏ 


Ê NoBot 
= 


| Mumericl lpDawnExtender 


: PagingBulletedListExtender 


PasswoardStrength 


Fı PopupControlExtender 
tr Rating 
HE ReorderList 


KZ ResizableZontrolExtender 


: Default.aspx ةحiص کود‎ 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" <چ‎ 


e Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" 8< 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml1l "> 
<head id="Head1" runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 


<div> 
<br /> 

«nbsp; Text Indicators<br /> 

&nbsp; 

<asp : TextBox ID="TextBoxl" runat="server"></asp: Text Box>&nbsp; <br 
ر‎ 

&nbsp; 

<asp:Label ID="Label1" runat="server" Width="153px"></asp: Label><br 
ر‎ 

خر ۆة 

&nbsp; Status Bar Indicators<br /> 

&nbsp; 

<asp : TextBox ID="TextBox2" runat='"server"></asp: TextBox><br /> 

&nbsp; 

<asp :Label 1ID="Label2" runat="server" Width="154px"></ asp : Label><br 
i 

<br /> 

«nbsp; Help Indicators<br /> 

&nbsp; 

<asp : TextBox ID="TextBox3" runat="server"></asp: TextBox><br /> 

&nbsp; 

<asp :Label ID="Label3" runat="server" Width="154px"></ asp: Label><br 
/<> 

<br /> 
<br /> 


<cc1l :PasswordStrength 1ID="PasswordStrength1" runat="server" 
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TargetControl1ID="TextBOx1" 
DisplayPosition="Right Side" 
StrengthIndicatorType="Text " 
PreferredPasswordLength="10" 
PrefixText="Strength : " 
TextStrengthDescriptions="Very 
Poor; Weak; Average; Strong; Excellent " 
MinimumNumericCharacters=" 0" 
MinimumSymbo1Characters="0" 
HelpStatusLabelID="Label1" 
TextCssClass="TextIndicator_ TextBox1" 
RequiresUpperAndLowerCaseCharacters="false"> 
</cc1 :PasswordStrength> 
<ccl :PasswordStrength ID="PasswordStrength2" runat="server" 
TargetControlID="TextBOx2" 
DisplayPosition="Right Side" 
StrengthIndicatorType="BarIndicator" 
BarIndicatorCssClass="BarIndicator_TextBox2" 
BarBorderCssClass="BarBorder TextBox2" 
PreferredPasswordLength="10" 
PrefixText="Strength : " 
TextStrengthDescriptions="Very 
Poor; Weak; Average; Strong; Excellent " 
MinimumNumericCharacters=" 1" 
MinimumSymbo1Characters="1" 
HelpStatusLabelID="Label2" 
RequiresUpperAndLowerCaseCharacters="true"> 
</cc1 :PasswordStrength> 
<ccl :PasswordStrength ID="PasswordStrength3" runat="server" 
TargetControl1ID="TextBOx3" 
TextCssClass="TextIndicator_ TextBox3" 
DisplayPosition="Right Side" 
StrengthIndicatorType="Text " 
PreferredPasswordLengt h="20" 
PrefixText="Meets Polixy : " 
MinimumNumericCharacters="2" 
MinimumSymbo1Characters="2" 
HelpStatusLabelID="Label3" 
HelpHandleCssClass="Text Indicator TextBox3 Handle" 
HelpHandlePosition=" BelowRight " 


TextStrengthDescriptions="Not at all; Very Low Compliance; 


Low Compliance; Average Compliance; Good Compliance; High Compliance; 
RequiresUpperAndLowerCaseCharacters="true"> 
</cc1 :PasswordStrength> 
</div> 
</form> 
</body> 
</html> 


ملاحظات حول الكود البرمجي : 


يمكن للمطور ان يقوم باختيار الكلمات المناسبة له للتعبير عن مدى قوة كلمة المرور وذلك بتعديل خصائص عنصر 
اجاكس حسب الر غبة واللغة المراد استخدامها او طريقة العرض المناسبة له. 


كود صفة StyleSheet.cs55‏ 
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.TextIndicator TextBoxl { 
background-color: Gray; 
color :White;, 
font-family :Arial; 
font-size:x-small; 
font-style:italic; 
padding: 2px 3px 2px 3px; 

} 


.BarIndicator TextBox2 { 
color: Blue; 
background-color : Blue; 
padding-bottom: 1px; 

J} 


. BarBorder TextBox2 { 
border-style :solid; 
border-width :1px; 
width: 200px; 
vertical-align :middle; 


} 


.TextIndicator TextBox3 { 
background-color : Blue; 
color : Yellow; 
font-size:small; 
font-variant : smal l—~caps; 
padding: 2px 3px 2px 3px; 

} 


.TextIndicator TextBox3 Handle { 
width: 16px; 
height :14px; 
background-image :url (images/Question.pPng) ; 
overflow: hidden; 
cursor :help; 


نهاية التمرين الثاني 
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التمرين الثالث : 


الشكل العام للتمرين : 


الشكل العام لبيئة العمل : 
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solution Explorer - Solution '5' (1 project) N x*« 


2L‏ د4 
r" Solution 'S' {1 project;‏ 
E 1P E:1...16l‏ 
خذمات E Lz) App_Code‏ 
i Î NumericUpDown. cs #g™‏ 


u İl ûpp_pata 


: چ‎ AjaxtontrolTaolkit. dll 

AjaxontralToalkit, pd‏ أ 

images 

lağ] down. gif 

laî] up. gif 

| Default. aspx 
ms 3 Default, aspx, cs 

i | Numeric IpDown,asmx 

A StyleSheet,css 

e ل‎ wmeb,config 


Add New ltem - E:lajax part 3 Awazl\Sessian 3161 


Templates: 


Yisual Studio installed templates 


jz] web Form [Master Page Web User Control 

E La Client Behavior 8 AA Client Control E ]A3A* Client Library 

I AJA Master Page 2| AJA* Web Forrn EG AJAxk-enabled WE Serwice 
DJ Erowser File ا‎ Class 4 Llass Diagram 

2 [Crystal Report 8 DataSet ا‎ menetic Handler 

dalobal Application Class 5 HTML Page 3š [ 5rript File‏ آڪ 

LINQ to SQL Classes E Report 3 Report Wizard 


HAResnurce File | ûû] site Map i skin File 

۲ SQL Server Database Aj] style sheet |] Text File 

EE urcF Service jy web Configuration File | web Service چ‎ 

[a] AML File ها‎ #ML Schema ا‎ #SLT File نختار من هنا‎ 


My Templates 


û visually designed class For creating a Web Service 
Name! NumericllpDown, as نختار الاسم المتاسب‎ 


Language: | visual C# ا‎ Place code in separate file نضغط أضاقة الصفحة‎ 
SElêzt master pagê 


فلاتیا 


ملاحظة : يتم إضافة صفحة خدمة كما يتم إضافة صفحة الوب العادية . 


asp:UpdatePanel - 
asp: TextBox - 
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asp:lmage - 

asp: Button - 

asp:Label - 
cc1:NumericUpDownExtender - 


1 عنصر اجاکس المستخدم‎ 
| 2| MoadalPapupExtender 
11 MulkiHandleSliderExtender 
Ê MutuallyExclusiyecherkEnx,.. 


| Ê NoBat 


| NumericllpDomwnExktender 


PagingBulletedListExtender 
= PasswordStrength 


fı PopuptontralExtender 


کود صح Default.aspX‏ : 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" <چ‎ 


<3@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" <چ‎ 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="SstyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp :ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<div style="text-align: center"> 
<asp : UpdatePanel ID="UpdatePanel1l" runat="server"> 
<Content Template> 
<br /><br /> 
Enter a numeric value and use the up and down buttons to 
increment /decrement <br /><br /> 
<asp : TextBox ID="TextBoxl" runat="server" Text="3" Width="120" 
style="text-align:center" /><br /><br /> 


Choose your favorite month<br /><br /> 
<asp : TextBox ID="TextBox2" runat="server" Text=" June" Width="120" 
style="text-align: center" /><br /><br /> 


Let the web service pick a random number between 0 and 1000 that is 
higher/lower than the displayed value<br /><br /> 

<asp : TextBox ID="TextBox3" runat="server" Text="500" Width="120" 
style="text-align: center" /><br /><br /> 


Use the arrow images to increment/decrement the value<br /><br /> 
<asp : TextBox ID="TextBox4" runat="server" Text="0" Width="70" 
style="text-align:center" /> 
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<asp : Image ID="img1" runat="server" ImageUrl="~/images/down. gif" 
AlternateText="Down" Width="20" Height="15"/> 

<asp : Image ID="img2" runat="server" ImageUrl="~/images/up. gif" 
AlternateText="Up" Width="20" Height="15"/><br /><br /> 

<br /> 


<asp : Button ID="Buttonl" runat="server" Text=" Submit " 
OnClick="Buttonl Click" /><br /><br /> 


<asp :Label ID="Labell1" runat="server" Text=" [No response provided 
yet]" /> 
<cc1l :NumericUpDownExtender 1D="NumericUpDownExtender1 " 
runat="server" 
TargetControllID="Text BOox1 " 
Width=" 120" 
RefValues="" 
ServiceDownMethod= "' " 
ServiceUpMethod='"" " 
TargetButtonDownlIlD='""" 
TargetButtonUpID="'""> 
</cc1 : Numeri cUpDownExtender> 
<cc1 :NumericUpDownExtender 1D="NumericUpDownExtender2" 
runat="server" 
TargetControllID="Text BOx2 " 
Width=" 120" 


RefValues="January; February; March; April; May; June; July; August ; September; Octo 
ber; November; December" 
ServiceDownMethod="' " 
ServiceUpMethod='"" " 
TargetButtonDownlIlD='""" 
TargetButtonUpID="'""> 
</cc1 : NumericUpDownExtender> 
<cc1l :NumericUpDownExtender 1D="NumericUpDownExtender3" 
runat="server" 
TargetControllID="Text BOx3" 
Tag= E 
Width=" 120" 
ServiceUpPath=" NumericUpDown . asmx " 


ServiceDownPat h="NumericUpDown .asmx" 

ServiceUpMethod=" Next Value" 
ServiceDownMethod="PrevValue" 
RefValues="" 
TargetButtonDownlID='"'"" 
TargetButtonUpID="'" > 

</cc1 : NumericUpDownExtender> 

<cc1l :NumericUpDownExtender 1D="NumericUpDownExtender4 " 

runat="server" 

TargetControlID="Text BOx4 " 
Width="80" 
TargetButtonDownlID="img1" 
TargetButtonUpID="img2" 
RefValues="" 
ServiceDownMethod="' " 
ServiceUpMethod="' "> 

</cc1 : NumericUpDownExtender> 

</ContentTemplate> 
</asp : UpdatePanel> 
</div> 
</form> 
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</body> 
</html> 


كود صذجة StyleSheet.cs55‏ 


body, div, p, h1, h2, h3, h4, ul, li, table 
{ 

margin :0; 

padding: 0; 

border:none; 


body 


background: #B4B4B4 url (images/body bg.gif) repeat left top; 
font-family: Tahoma, Arial, sans-serif; 
font-size: 75%; 


NumericUpDowWN.Cs ةخفêص كود‎ 


using System; 

using System. Web; 

using System.Collections; 

using System.Web. Services; 

using System.Web. Services. Protocols; 


/// <summary> 

/// Summary description for NumericUpDown 

/// </summary> 

[WebService (Namespace = "http: //tempuri.org/") ] 
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1l 1) ] 
[System. Web. Script. Services. Script Service () ] 

public class NumericUpDown : System. Web. Services. WebService 


{ 
public NumericUpDown () 
{ 
//Uncomment the following line if using designed components 
//InitializeComponent (); 
} 
[WebMethod] 
public int NextValue (int current, string tag) 
{ 
Random rand = new Random(); 
return rand. Next (Math. Min (1000, Math.Max (0, current)), 1001); 
} 
[WebMethod] 
public int PrevValue (int current, string tag) 
{ 
Random rand = new Random(); 
return rand. Next (0, Math.Min (1000, Math.Max (0, current))); 
} 
} 
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ملاحظة : في صفحة Numer cلم 00W 1.٤5‏ تم استخدام رمdرهR‏ لتوليد ارقام عشوائية بين 
رقمين 


NumericUp DoW .as mx كود صڊفحة‎ 


<%@ WebService Language="C#" CodeBehind="~/App_Code/NumericUpDown. cs" 
Class="NumericUpDown" 3% 


نهاية التمرين الثالث 
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الشكل العام لبيئة العمل : 


[ ution 'Salution1' (1 project} 
= TÊ El, ASolutian2! 
Î ûpp_pata 


Bl: ا‎ Ein 
H.. E] Default,aspx 


i. web.config 


asp:Panel - 
cc1:DropShadowExtender - 
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2 LoallapsibleFanelExtender 
1 LoanfirmButtanEs#tender 
چ‎ DragPanelExtender 


| propDownExtender 
|] D¥namicPopulateExtender 
8 Filtered TextBoxExtender 


کود صڊفخة XضDefault.asp‏ 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" 8< 


e Register Assembly="AjaxControlToolkit'" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" < 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.0 Transitional//EN" 
"http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xml1lns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp: ScriptManager> 
<br /> 
<br /> 
<div> 
<asp:Panel ID="Panell" runat="server" BackColor="#COCOFF'" Height=" 86px" 
Width="187px"> 
This is my panel. 
</asp: Panel> 
<ccl :DropShadowExtender 1ID="DropShadowExtenderl" runat="server" 
TargetControllID="Panel1l" Opacity=". 75" Rounded=" false" Radius='"6'"'> 
</cc1 :DropShadowExtender> 


</div> 
</form> 


</body> 
</html> 


نهاية التمرين الرابع 
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التمرين الخامس : 


الشكل العام للتمرين : 


Default Calendar: 
r000 


with Custom Sty 
1 


Date Format: 


الشكل العام لبيئة العمل : 
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ی 


Solution Explorer - Solution Solution’ (1 pr... w HM 3% 


EAI EEE 
| 5ا‎ Solution Solution’ {1 project) 
ا‎ Ê E1,. 1Salutiana 
و‎ pp اة‎ 
El» ig Bin 
E2) 3 AjaxkoantralToalkit , dll 
ë| AjaxcontrolToolkit.pdb 
lêl Lalendar_scheduleH5,png 
E: EE Default, aspx 
A] stylesheet ,css 
i web.config 


صورة الزر 


asp:TextBOoXx - 
cc1:CalendarExtender - 
asp:lmage - 


E, AccordionPane 
E AlwaysYisibleZontrolExtander 


3” AnimaktionExtender 


EZ AutolompleteExtender 
| a LalendarExtender 
# LascadingDrapDown = 


۳ LollapsiblePanelExtender 


2 
LEI REITER ESTEE ERE E 


کود صڊفخة XضDefault.asp‏ 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" 8< 


<e@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" 8< 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.0 Transitional//EN" 
"http: //www. w3. org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xml1ns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="SstyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp : ScriptManager 1ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<div> 
<br /><br /> 
<b>Default Calendar: </b><br /> 
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<asp : TextBox ID="Datel" runat="server"></asp: TextBox> 
<cc1l :CalendarExtender ID="CalendarExtenderl" runat="server" 
TargetControlID="Date1l "> 
</cc1 :CalendarExtender> 
<br /><br /> 
<b>Calendar with Custom Style and Date Format :</b><br /> 
<asp : TextBox ID="Date2" runat="server"></asp: TextBox> 
<cc1l :CalendarExtender 1ID="CalendarExtender2" runat="server" 
TargetControlID="Date2" CssClass="MyCalendar" Format="MMM d, yyyy"> 
</cc1 :CalendarExtender> 
<br /><br /> 
<b>Calendar with associated button:</b><br /> 
<asp : TextBox ID="Date3" runat="server"></asp: TextBox> 
<asp : Image ID="Imagel" runat="server" 
ImageUrl="~/Calendar _ scheduleHS.png" AlternateText='"" /> 
<cc1l :CalendarExtender ID="CalendarExtender3" runat="server" 
TargetControlID="Date3" PopupButtonlD=" Image1l "> 
</cc1 :CalendarExtender> 
</div> 
</form> 
</body> 
</html> 


كود صفجة StyleSheet.cs5s‏ 


.MyCalendar .ajax calendar container 


{ 
border:1px solid #646464; 
background-color: lemonchiffon; 
color: red; 
} 


.MyCalendar .ajax calendar other .ajax calendar day, 
.MyCalendar .ajax calendar other .ajax calendar year 
{ 
color: black; 
} 
.MyCalendar .ajax calendar hover .ajax calendar day, 
.MyCalendar .ajax calendar hover .ajax calendar _ month, 
.MyCalendar .ajax calendar hover .ajax calendar year 
{ 
color: black; 
} 
.MyCalendar .ajax calendar active .ajax calendar day, 
.MyCalendar .ajax calendar active .ajax calendar _ month, 
.MyCalendar .ajax calendar active .ajax calendar year 
{ 
color: black; 
font-weight : bold; 


نهاية التمرين الخامس 
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التمرين السادس : 


سن 5کو 
N2N? 10:07:5‏ 


as, ben press TPE 


2 اخنيار رطريشة‎ 
س‎ 
E Color Bakg emê 


الشكل العام لبيئة العمل : 


Fr Solution “solution {1 project} 
3:: ق‎ E:1..15olutionz 
a F7 App_Ûata 


E. 2 Ein 
Bl E] Default aspx 


0 km web.config 


العناصر المستخدمة في التمرين : 
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asp:UpdatePanel - 

asp:Label - 

input type="checkbox" - 

asp: Button - 
cc1:UpdatePanelAnimationExtender - 


: عنصر اجاكس المستخدم‎ 
| ıapuoncaIner 
ET TexBoxWatermarkExtender 


ToggleButtanExtender‏ ا 
E) TonalkitScriptManagEer‏ 


3 UpdatePanelanirnaktianExtender 
ھا‎ YalidatorZallautExtender 
i2 General 


کود صڊفخة XضDefault.asp‏ 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" > 


<8 Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" < 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp : ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<div style="margin-bottom: 10px; "> 
<div style="border: dashed 1px #222222; "> 
<div id="up_ container" style="background-color: #40669A; "> 
<asp : UpdatePanel ID="update" runat="server"> 
<ContentTemplate> 
<div id="background" style="text-align: center; 
vertical-align: middle; line-height: 44px; padding: 12px; height: 44px; 
color: #FFFFFF; "> 
<aspPp :Label 1D="1blUpdate" runat="server" 
Style="padding: 5px; font-size: 14px; font-weight: bold; "> 
4/28/1906 12:00:00 AM 
</asp: Label> 
</div> 
</ContentTemplate> 
<Triggers> 
<asp :AsyncPostBackTrigger ControlID="btnUpdate" 
EventName="Click" /> 
</Triggers> 
</asp : UpdatePanel> 
</div> 
</div> 
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</div> 
Choose the effects, then press 'Update':<br /> 
<input type="checkbox" id="effect_ fade" checked="checked" /><label 
for="effect fade">Fade</label><br /> 
<input type="checkbox" id="effect_ collapse" checked="checked" 
/><label for="effect_collapse">Collapse</label><br /> 
<input type="checkbox" id="effect color" checked="checked" /><label 
for="effect_ color">Color Background</label><br /> 
<asp : Button ID="btnUpdate" runat="server" Text=" Update" 
OnClick="btnUpdate Click" /> 
<cc1l :UpdatePanelAnimationExtender ID="upae" BehaviorID="animation" 
runat="server" TargetControlID="update'"'> 
<Animations> 
<OnUpdat ing> 
<Sequence> 
&8-- store the original height of the panel --$% 
<ScriptAction Script="var b = $find('animation'); 
b._originalHeight = b._element.offsetHeight;" /> 


&8-- Disable all the controls --%3 
<Parallel duration=" 0"> 
<EnableAction AnimationTarget='"btnUpdate" 
Enabled="false" /> 
<EnableAction AnimationTarget="effect_ color" 
Enabled="false" /> 
<EnableAction AnimationTarget="effect_ collapse" 
Enabled="false" /> 
<EnableAction AnimationTarget="effect_ fade" 
Enabled="false" /> 
</Parallel> 
<StyleAction Attribute="overflow" Value="hidden" /> 


&8-- Do each of the selected effects $3 
<Parallel duration=".25'" Fps='" 30"> 
<Condition 
ConditionScript=" $get ('effect_ fade') .checked"> 
<FadeOut AnimationTarget="up_ container" 
minimumOpacity=".2" /> 
</Condition> 
<Condition 
ConditionScript=" Ş$get ('effect_ collapse') .checked"> 
<Resize Height="0" /> 
</Condition> 
<Condition 
ConditionScript="$get ('effect_color') .checked"> 
<Color AnimationTarget="up_container" 
PropertyKey="backgroundColor" 
EndValue="#FF0000" StartValue="#40669A" 
/< 
</Condition> 
</Parallel> 
</ Sequence> 
</OnUpdating> 
<OnUpdated> 
<Sequence> 
&8-- Do each of the selected effects --$3 
<Parallel duration=".25" Fps='" 30"> 
<Condition 
ConditionScript="$get ('effect_ fade') .checked"> 
<FadeIn AnimationTarget='"up_container" 
minimumOpacity=".2" /> 
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</Condition> 
<Condition 
ConditionScript="$get ('effect_collapse') .checked"> 
&8-- Get the stored height --$% 
<Resize 
HeightScript="$find('animation')._originalHeight" /> 
</Condition> 
<Condition 
ConditionScript="$get ('effect_color') .checked"> 
<Color AnimationTarget='"up_ container" 
PropertyKey="backgroundColor" 
StartValue="#FF0000" EndValue="#4066 9A" 
/< 
</Condition> 
</Parallel> 


&§-- Enable all the controls --%% 
<Parallel duration="0'"> 
<EnableAction AnimationTarget="effect_ fade" 
Enabled="true" /> 
<EnableAction AnimationTarget="effect_ collapse" 
Enabled="true" /> 
<EnableAction AnimationTarget="effect_ color" 
Enabled="true" /> 
<EnableAction AnimationTarget="btnUpdate " 
Enabled="true" /> 
</Parallel> 
</ Sequence> 
</OnUpdated> 
</Animations> 
</cc1 : UpdatePanelAnimationExtender> 


</form> 
</body> 
</html> 


كود صفحة Default.aspX.c5‏ 


using System; 

using System. Configuration; 

using System. Data; 

using System.Linqd; 

using System. Web; 

using System.Web. Security; 

using System.Web.UI; 

using System.Web.UI. Html1Controls; 
using System.Web.UI. WebControls; 
using System.Web.UI. WebControls. WebParts; 
using System. Xml .Linqg; 


public partial class _Default : System.Web.UI. Page 
{ 


protected void Page Load(object sender, EventArgs e) 


{ 
} 


protected void btnUpdate Click (object sender, EventArgs e) 
{ 
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System. Threading. Thread. Sleep (300); 
1blUpdate. Text = DateTime. Now. ToString(); 


نهاية التمرين السادس 
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الشكل العام للتمرين : 


Taal: 


Favokes 0 


E ER E ع‎ Ges $ 
a - a a 2 
ب‎ 2foefault.asp> 


: ا1734 
xdiress E] napiifocahoti t7 5 5 5‏ 
mywebsearch -[‏ 


vepFacs_ U 


الشكل العام لبيئة العمل : 


Salikiarî Explorer - Salutian Saluki fl .., w HE # 


SEB EEeE 
[aa] Solution 'Salutioni' (1 project} 
E ق‎ E!1,..15olutionz 

` J App_pata 


E 3 Ein 
- 3| Default, aspx 


E] Default,aspx, es 


i E web ,config 
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العناصر المستخدمة في التمرين : 


asp:TextBox - 
asp:Label - 
asp:UpdatePanel - 
cc1:SliderExtender - 


عنصر اجاكس المستخدم : 


fı PopuptontralExtender 
r Rating 

#8 ReorderLisk 

K2 ResizableContralExtender 


LE RoundediornersExtender 


| | 1 SliderExtender wm 


< <lide5showExtender 


ER 
[7 Tabtoantainer 


EA TeYFRAYMLaFerrmarEF rFanrpr 
Default.aspضX کود صڊفخة‎ 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits='"_ Default" <چ‎ 


<e@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" <چ‎ 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp : ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<br /> 
<asp : TextBox ID="Sliderl BoundControl" runat="server" Width="30" /><br 


/< 

<asp : TextBox ID="Sliderl" runat="server" /> 

<br /> 

<br /> 

<asp : TextBox ID="Slider2" runat="server" AutoPostBack="true" Text="0" 
/< 


<asp :Label ID="Slider2 BoundControl" runat="server" /><br /> 
<asp : UpdatePanel 1ID="UpdatePanel1l" runat="server" 
UpdateMode="conditional "> 
<ContentTemplate> 
<aspPp :Label ID="1blUpdateDate" runat="server" style="font-— 
size:80%;" Text="&nbsp;" /> 
</ContentTemplate> 
<Triggers> 
<asp :AsyncPostBackTrigger ControllD="Slider2" 


Page 29 of 37 


EventName="TextChanged" /> 
</Triggers> 
</asp : UpdatePanel> 
<br /> 
<ccl :SliderExtender ID="SliderExtenderl" runat="server" 
BehaviorlID="Sliderl" 
TargetControlID="Slider1" 
BoundControlID="Sliderl BoundControl" 
Orientation="Vertical" 
EnableHandleAnimation="true"> 
</ccl1 :SliderExtender> 
<ccl :SliderExtender ID="SliderExtender2" runat="server" 
BehaviorlID="Slider2" 
TargetControllID="Slider2" 
Minimum='"—100" 
Maximum='" 100" 
BoundControlID="Slider2 BoundControl" 


Steps="5'""> 
</cc1 :SliderExtender> 
</form> 
</body> 
</html> 


كود صفحة Default.aspX.c5‏ 


using System; 

using System. Configuration; 

using System. Data; 

using System. Linq; 

using System. Web; 

using System.Web. Security; 

using System.Web.UI; 

using System.Web.UI. Html1Controls; 
using System.Web.UI. WebControls; 
using System.Web.UI. WebControls. WebParts; 
using System. Xml .Ling; 


public partial class _Default : System.Web.UI. Page 
{ 
protected void Page Load(object sender, EventArgs e) 


{ 
ScriptManager1l. RegisterAsyncPostBackControl]l (Slider2); 


if (Page.IsPostBack) 
{ 
1blUpdateDate. Text = "Changed at : " + 
DateTime. Now. ToLongTimeString(); 
} 
} 


نهاية التمرين السابع 
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التمرين الثامن : 


الشكل العام للتمرين : 


الشكل العام لبيئة العمل : 


F7 Solution "Solution! 1 ET 
E E1, Solutionz 
i App_Data 


Ein 
. ÛA| company aspx 


2| Default, aspx 
E] hame.aspx 
Af Stylesheet css 
i web,config 


العناصر المستخدمة في التمرين : 
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cc1:HoverMenuExtender - 
asp:Panel - 
asp:LinkButton - 


TE prapDownExtender 


LF GropShadowExterıder 


i] D¥namicPopulateExkender 
E Filtered TeExEBaxExtender 


HaverMenuExtender 


u, ListearchExtender 


1 MaskedEdIEExtender 
1 MaskedEdit¥alidator 


کود صڊفخة XضDefault.asp‏ 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" > 


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" 
TagPrefix="ccl1" <چ‎ 


<!DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xmlns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp : ScriptManager ID="ScriptManagerl" runat="server"> 
</asp: ScriptManager> 
<div> 
<cc1l : HoverMenuExtender ID="HoverMenuExtenderl1" 
runat="server" 
TargetControlID="btnProduct " 
PopupControlID="PanelPopUp" 
PopupPosition="bottom" 
OffsetX=" 6" 
PopDelay="25" HoverCssClass="popupHover"> 
</cc1 : HoverMenuExtender> 
<asp:Panel ID="PanelPopUp" runat="server" Height=" 50px" 
Width="125px" CssClass='"popupMenu'" > 
<aspP :LinkButton ID="BtnUpDate" runat="server" 
CausesValidation="true" 
CommandName= "company" Text="company" 
PostBackUrl="~/company.aspx"></asp:LinkButton><br /> 
<aspP :LinkButton ID="BtnCancel" runat="server" 
CausesValidation="false" CommandName='"Cancel" Text=" home" 
PostBackUrl='"~/home. aspx"></asp : LinkButton> 
</asp: Panel> 


<asp :LinkButton ID="btnProduct" runat="server" >PRODUCT: Joes 


Page 32 of 37 


Training Video</asp: LinkButton> 
</div> 
</form> 

</body> 

</html> 


كود صذجة StyleSheet.cs5s‏ 


. PopupHover 

{ 
background-image :url (images/header-opened. png) ; 
background-repeat : repeat-—x; 
background-position: left top; 
background-color :#FSF7F8; 

} 

. PopupMenu 

{ 
position:absolute; 
visibility: hidden; 
background-color : #AAFFFF; 
opacity:.9; 
filter: alpha (opacity=90); 


نهاية التمرين الثامن 
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التمرين التاسع : 


الشكل العام لبيئة العمل : 


العناصر المستخدمة في التمرين : 


asp:TextBox - 
asp:UpdatePanel - 


Û App_pata 


3 Bin 
gE aj Default.aspx 


i HE] Default.aspx,cs 
= Aj stylesheet ,css 

٤ B2 2 

i 3 web.config 
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asp:RadioButtonList - 
cc1:PopupControlExtender - 


8 Numeric JpDownExtender 


PagingBulletedListExtender 
a Passwordstrength 


f PopupControlExtender 
r Rating 


HÊ ReorderList 
Lz ResizablecontrolExtender 


LF RoundedZornersExtender 


کود صڊفخة XضDefault.asp‏ 


<¥@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx. cs" 
Inherits='"_ Default" 8> 


e Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit " 
TagPrefix="cc1" 8< 


<!DOCTYPE html PUBLIC "-//W3C//DTID XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd"> 


<html xml1lns="http: //www.w3.org/1999/xhtml1l"> 
<head runat="server"> 
<title>Untitled Page</title> 
<link href="SstyleSheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<form id="forml1" runat="server"> 
<asp: ScriptManager ID="ScriptManagerl" runat="server"> 
</asp : ScriptManager> 
<div> 
<br /> 
ToDo: 
<asp : TextBox 1D="MyTextBox" runat="server" 
Width="538px"></ asp : Text Box> 
<br /> 
<asp:Panel 1ID="Panel1l" runat="server" CssClass="popupControl "> 
<asp : UpdatePanel ID="UpdatePanel1l" runat="server"> 
<ContentTemplate> 
<asp :RadioButtonList ID="RadioButtonList1l" 
runat="server" AutoPostBack='"true" 
OnSelectedIndexChanged="RadioButtonList1 SelectedIndexChanged" 
Width="146px'" > 
<asp:ListItem Text=" Awaz 
Shikhi"></asp: List Item> 
<asp:ListItem Text="Simon 
Muzio"></asp:ListlItem> 
<asp:ListItem Text=" Brian 
Goldfarb"></asp: List Item> 
<asp:ListItem Text="Joe 
Stagner"></asp:ListItem> 
<asp:ListItem Text="Shawn 
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Nandi"></asp:ListItem> 
</asp : RadioButtonList> 
</ContentTemplate> 
</asp : UpdatePanel> 
</asp : Panel> 
<br /> 
<cc1l :PopupControlExtender 1ID="PopupControlExtenderl" runat="server" 
CommitProperty="value" 
CommitScript="e. value += ' - SEND A MEETING REQUEST!';" 
PopupControlID="Panel1l " 
Position=" Bottom" TargetControllID="MyTextBOx'"> 
</cc1 : PopupControlExtender> 
</div> 
</form> 
</body> 
</html> 


StyleSheet.css ةaص كود‎ 


.watermark 
{ 

background: #FFAAFF; 
} 


.pPopupControl 

{ 
background-color : #AAD4FF; 
position:absolute; 
visibility:hidden; 
border-style :solid; 
border-color: Black; 
border-width: 2px; 


كود صفحة Default.aspX.c5‏ 


using System; 

using System. Configuration; 

using System. Data; 

using System. Linq; 

using System. Web; 

using System. Web. Security; 

using System.Web.UI; 

using System.Web.UI. Html1Controls; 
using System.Web.UI. WebControls; 
using System.Web.UI. WebControls.WebParts; 
using System. Xml .Linqg; 

using AjaxControlToolkit; 


public partial class _Default : System.Web.UI. Page 


{ 
protected void RadioButtonList1 SelectedIndexChanged (object sender, 
EventArgs e) 


{ 
if ((String. IsNullOrEmpty (RadioButtonList1l. SelectedValue)) == 
false) 
{ 
// Popup result is the selected task 


PopupControlExtender. GetProxyForCurrentPopup (this. Page) . Commit (RadioButtonlL 
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ist1l.SelectedValue) ; 
} 
// Reset the selected item 
RadioButtonListl1.ClearSelection(); 


نهاية التمرين التاسع 


جميع التمارين تمت تجربتها وتم التأكد من عملها بشكل صحيح.. 


مع التمنيات بالتوفیق : آواز شيخي 


www.asp.net : المصدر‎ 


Page 37 of 37 


